<template>
    <div class="pc-box" v-if="!isMobile">
        <div class="product l-f l-col-stretch l-row-sb">
            <div class="product_left l-f l-row-c" @click="onPrev">
                <img class="product_left_icon" src="@/assets/icons/icon-banner_left.svg" alt="">
            </div>
            <div class="product_content">
                <flicking
                    ref="flickingRef"
                    :options="flickingOptions"
                    :viewportTag="'div'"
                    :cameraTag="'div'"
                    :cameraClass="''"
                >
                    <div class="product_content_item" v-for="(item,index) in listData" :key="index">
                            <ProductItem :options="item" @click="onEvent(index)" :active="current === index" :isOpacity="isOpacity" />
                        </div>
                </flicking>
            </div>
            <div class="product_right l-f l-row-c" @click="onNext">
                <img class="product_right_icon" src="@/assets/icons/icon-banner_left.svg" alt="">
            </div>
        </div>
    </div>
    <div class="h5-box mb-product">
         <div class="mb-product_item"  v-for="(item,index) in listData" :key="index">
            <ProductItem :options="item" @click="onEvent(index)" />
         </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import Flicking from "@egjs/vue3-flicking";
import { useFlickingReactiveAPI } from '@egjs/vue3-flicking'
import { useMainStore } from '@/store'
import { useRouter } from 'vue-router'

import { getLockListApi } from '@/api/tradeApi'

import ProductItem from '../productItem/index.vue'

defineProps({
    current: {
        type: Number,
        default: 0
    },
    isOpacity: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['change'])

const router = useRouter()

const mainStore = useMainStore()
const isMobile = computed(() => {
    return mainStore.isMobile
})

const flickingRef = ref(null)

const flickingOptions = {
    circular: false,
    bound: true,
    duration: 500,
    defaultIndex: 0,
    horizontal: true,
    moveType: 'freeScroll'
}

const {
  isReachStart,
  isReachEnd,
  moveTo
} = useFlickingReactiveAPI(flickingRef)

let listData = ref([])

onMounted(() => {
    getLockList()
})

const onPrev = () => {
 if (!isReachStart.value) {
    moveTo(flickingRef.value.index - 1)
  }
}
const onNext = () => {
 if (!isReachEnd.value) {
    moveTo(flickingRef.value.index + 1)
  }
}

const onEvent = (index) => {
    if(router.currentRoute.value.name === 'aiTradingConfirmation') {
        emits('change',index)
        return
    }
    router.push({name: 'aiTradingConfirmation', params: {
        index: index
    }})
}

// 获取锁仓列表
const getLockList = async () => {
    const res = await getLockListApi()
    listData.value = res
}

</script>

<style lang="scss" scoped>
.product {
    margin-top: 20px;
    gap: 16px;
    &_left {
        width: 25px;
        cursor: pointer;
        &_icon {
            width: 9px;
            height: 17px;
        }
    }
    &_right {
         width: 25px;
         cursor: pointer;
        &_icon {
            width: 9px;
            height: 17px;
            transform: rotate(-180deg);
        }
    }
    &_content {
        width: 100%;
        &_item {
            margin: 0 12px;
        }
    }
}
::v-deep(.flicking-camera) {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        z-index: 1;
        will-change: transform;
}

.mb-product {
    margin-top: 10px;
    &_item {
        margin-bottom: 10px;
    }
}
</style>